<!-- 水表费用 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" size="1200px" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">费用</div>
			</div>
		</template>

		<template #default>
			<div class="zs-layout-flex-col zs-drawer-container">
				<div class="zs-card-sm zs-space-bottom">
					<span>
						<el-input v-model="queryParams.waterMeterCode" class="zs-select-md zs-space-right-sm" placeholder="水表编号" clearable @blur="queryList" />
						<el-date-picker v-model="queryParams.startTime" class="zs-select-md zs-space-right-sm" placeholder="开始时间" style="width: 100%" value-format="YYYY-MM-DD" @change="judgeTime" />
						<el-date-picker v-model="queryParams.endTime" class="zs-select-md zs-space-right-sm" placeholder="结束时间" style="width: 100%" value-format="YYYY-MM-DD" @change="judgeTime" />
					</span>
					<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
				</div>

				<!-- teble -->
				<div class="zs-card zs-table-page-content zs-layout-flex-auto">
					<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
						<el-table-column type="index" label="序号" width="60" align="center" />
						<el-table-column prop="waterMeterCode" label="水表编号" align="left" show-overflow-tooltip />
						<el-table-column prop="duringTime" label="期间" width="190" align="center" show-overflow-tooltip />
						<el-table-column prop="currentNum" label="抄表读数" align="center" show-overflow-tooltip />
						<el-table-column prop="rowNum" label="行度" align="center" show-overflow-tooltip />
						<el-table-column prop="multiplier" label="倍率" align="center" show-overflow-tooltip />
						<el-table-column prop="dosage" label="用量" align="center" show-overflow-tooltip />
						<el-table-column prop="coefficient" label="系数" align="center" show-overflow-tooltip />
						<el-table-column prop="price" label="单价" align="center" show-overflow-tooltip />
						<el-table-column prop="sum" label="金额" align="center" show-overflow-tooltip />
						<el-table-column prop="pushStatusValue" label="推送结果" width="120" align="center" show-overflow-tooltip />
					</el-table>
				</div>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { waterMeterCostListApi } from '@/api/energy.js';
	import { ref, reactive, nextTick, watch } from 'vue';
	import { ElMessage } from 'element-plus';
	import { useRoute } from 'vue-router';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
	});

	const route = useRoute();
	let isShowDrawer = ref(props.isShow);

	//查询条件
	let queryParams = reactive({ projectCode: route.query.projectCode });

	// 列表 filed
	let tableData = reactive({
		loading: false,
		data: [],
	});

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				if (newVal) {
					queryParams.contractId = props.currentRow.contractId;
					queryParams.waterMeterCode = '';
					queryParams.startTime = '';
					queryParams.endTime = '';
					queryList();
				}
			});
		},
	);

	const emit = defineEmits(['close']);

	// 列表数据源 | 返显
	const queryList = async () => {
		tableData.loading = true;
		let res = await waterMeterCostListApi(queryParams);
		if (res.data.code !== 200) return;
		tableData.loading = false;
		tableData.data = res.data.data.list || [];
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};

	const judgeTime = () => {
		let startTime = new Date(queryParams.startTime).getTime();
		let endTime = new Date(queryParams.endTime).getTime();
		if (startTime && endTime) {
			if (startTime > endTime) {
				ElMessage({
					message: '结束时间不能小于开始时间',
					type: 'warning',
				});
				queryParams.endTime = '';
			} else {
				queryList();
			}
		}
	};
</script>
